<template>
  <div class="body">
    <!-- 顶部 -->
    <div class="top">
      <span>
        <van-icon name="arrow-left" />
      </span>
      <h3>发布房源</h3>
    </div>
    <!-- 房源信息 -->
    <div class="message">
      <div class="m-title">房源信息</div>
      <!-- 小区名称 -->
      <div class="mm-massage">
         <div class="m-msg">
        <div class="g-left">
            小区名称
        </div>
        <div class="g-center">
            请输入小区名称
        </div>
        <div class="g-right">
            <van-icon name="arrow" />
        </div>
      </div>
      </div>
      <!-- 租金 -->
       <div class="mm-massage">
         <div class="m-msg">
        <div class="g-rent">
           租金
        </div>
        <div class="g-text">
            <input placeholder="请输入租金/月" type="text">
        </div>
        <div class="g-month">
            ¥/月
        </div>
      </div>
      </div>
      <!-- 建筑面积 -->
     <div class="mm-massage">
         <div class="m-msg">
        <div class="g-rent">
           建筑面积
        </div>
        <div class="g-text">
            <input placeholder="请输入建筑面积" type="text">
        </div>
        <div class="g-month">
            m
        </div>
      </div>
      </div>
    <!-- 户型 -->
       <div class="mm-massage">
         <div class="m-msg">
        <div class="g-left">
            户型
        </div>
        <div class="g-center">
            请选择
        </div>
        <div class="g-right">
            <van-icon name="arrow" />
        </div>
      </div>
      </div>
      <!-- 所在楼层 -->
      <div class="mm-massage">
         <div class="m-msg">
        <div class="g-left">
            所在楼层
        </div>
        <div class="g-center">
            请选择
        </div>
        <div class="g-right">
            <van-icon name="arrow" />
        </div>
      </div>
      </div>
      <!-- 朝向 -->
      <div class="mm-massage">
         <div class="m-direction">
        <div class="g-left">
            朝向
        </div>
        <div class="g-center">
            请选择
        </div>
        <div class="g-right">
            <van-icon name="arrow" />
        </div>
      </div>
      </div>
    </div>
        <!-- 房屋标题 -->
    <div class="house-title">
        <div class="h-title">
            房屋标题
        </div>
        <div class="h-text">
            <input placeholder="请输入标题（例如：整租 小区名 2室 500元）" type="text">
        </div>
    </div>
    <!-- 房屋图像 -->
    <div class="house-img">
         <div class="h-title">
            房屋图像
        </div>
        <div class="pic">

        </div>
    </div>
    <!-- 房屋配置 -->
    <div class="house">
      <div class="house-title">
        <h3>房屋配置</h3>
      </div>
      <div class="house-list">
        <ul>
          <li>
            <i><van-icon name="like-o" /></i>衣柜
          </li>
          <li>
            <i><van-icon name="cashier-o" /></i>洗衣机
          </li>
          <li>
            <i><van-icon name="like-o" /></i>空调
          </li>
          <li>
            <i><van-icon name="fire-o" /></i>天然气
          </li>
          <li>
            <i><van-icon name="like-o" /></i>冰箱
          </li>
        </ul>
        <ul>
          <li>
            <i><van-icon name="like-o" /></i>暖气
          </li>
          <li>
            <i><van-icon name="cashier-o" /></i>电视
          </li>
          <li>
            <i><van-icon name="fire-o" /></i>热水器
          </li>
          <li>
            <i><van-icon name="like-o" /></i>宽带
          </li>
          <li>
            <i><van-icon name="like-o" /></i>沙发
          </li>
        </ul>
      </div>
    </div>
    <!-- 房屋描述 -->
    <div class="house-bottom">
        <div class="house-title">
        <h3>房屋描述</h3>
      </div>
      <div class="h-text">
      <textarea placeholder="请输入房屋描述信息" name="" id="" cols="30" rows="10"></textarea>
      </div>
    </div>
    <!-- 底部 -->
  
  </div>
</template>

<script>
export default {
  name: "HouseGorent",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.body {
    position: relative;
  background-color: #ece9e9;
  // height: 1000px;
  .top {
    display: flex;
    height: 45px;
    background-color: #21b97a;
    color: #fff;

    span {
      line-height: 40px;
      font-size: 16px;
      padding-left: 15px;
    }
    h3 {
      line-height: 9px;
      margin: auto;
      font-weight: 400;
      font-size: 16px;
    }
  }
  //   发布房源

  .message {
    height: 305px;
    background-color: #fff;
    .m-title {
      font-size: 15px;
      color: #21b97a;
      padding: 15px;
      padding-bottom: 9px;
      border-bottom: 1px solid #ece9e9;
    }
      .mm-massage{
        padding: 0 15px;
     .m-msg{
        font-size:14px;
        height: 44px;
        display: flex;
        // padding: 7px 15px ;
        position: relative;
        border-bottom: 1px solid #ece9e9;
        .g-left{
            color: #666;
            padding-top:10px ;

        }
        .g-center{
            color: #888;
            font-size: 14px;
            position: absolute;
            top: 10px;
            right: 36px;
        }
        .g-right{
            position: absolute;
             top: 8px;
            right: 13px;
            width: 15px;
            height: 15px;
            color: #a9a8a8;
            font-size: 20px;
        }
        .g-rent{
            font-size: 14px;
            color: #666;
            width: 85px;
            text-align: left;
            line-height: 43px;
        }
        .g-text{
            font-size: 14px;
            // height: 24px;
            line-height: 42px;
            input{
            border: 0;
            // color: #fcfafa;
            }
        }
        .g-month{
            color:#888 ;
            font-size: 14px;
            position: absolute;
             top: 12px;
            right: 13px;
        }
    }
    .m-direction{
        font-size:14px;
        height: 44px;
        display: flex;
        position: relative;
        .g-left{
            color: #666;
            padding-top:10px ;

        }
        .g-center{
            color: #888;
            font-size: 14px;
            position: absolute;
            top: 10px;
            right: 36px;
        }
        .g-right{
            position: absolute;
             top: 8px;
            right: 13px;
            width: 15px;
            height: 15px;
            color: #a9a8a8;
            font-size: 20px;
        }
    }
  }
   
  }
  // 房屋标题
  .house-title{
    height: 85px;
    background-color: #fff;
    .h-title{
        color:#333;
        font-size: 14px;
        padding: 15px;
        padding-bottom: 9px;
        border-bottom: 1px solid #ece9e9;
    }
    .h-text{
        padding-left:15px;
        padding-right: 15px;
        height: 44px;
        input{
        width: 100%;
        border: 0;
        font-size: 14px;
        color: #e5e2e2;
        line-height: 44px;
        }
}
  }
  // 房屋图像
.house-img{
    background-color: #fff;
    font-size:15px ;
    height: 150px;
    .h-title{
    color: #333;
    padding: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ece9e9;
    }
    .pic{
        height:83px ;
        width: 83px;
        border: 1px solid #ece9e9;
        margin: 8px;
    }
}
  // 房屋配置
  .house {
    height: 200px;
    margin-bottom: 15px;
    background-color: #fff;
    .house-title {
        height: 20px;
      padding: 0 15px;
      padding-bottom: 9px;
        border-bottom: 1px solid #cecece;
        margin: 0;

      h3 {
        font-size: 14px;
        color: #333;
        margin: 0;
        margin-bottom: 10px;
        font-weight: 600;
        // padding: 15px 0;
      }
    }
    .house-list {
      padding: 0 15px;
      height: 142px;

      ul {
        display: flex;
        text-align: center;
        li {
          margin: 10px 0;
          height: 51px;
          width: 71px;
          font-size: 14px;
          i {
            font-size: 22px;
            height: 28px;
            display: block;
          }
        }
      }


    }
  }
  // 房屋描述
  .house-bottom{
    height: 187px;
    background-color: #fff;
    .house-title {
        height: 20px;
      padding:  15px;
      padding-bottom: 9px;
        border-bottom: 1px solid #cecece;
        margin: 0;
      h3 {
        font-size: 14px;
        color: #333;
        margin: 0;
        // margin-bottom: 10px;
        font-weight: 600;
      }
    }
    .h-text{
       textarea{
        height: 128px;
        border: 0;
        padding-left:15px;
        font-size:13px ;
        resize: none;
       }
        
    }
  }
//  底部

}
</style>
